<!-- 带有分页的表格组件 -->
<template>
	<div class="table_container">
		<div class="table">
			<el-table :data="searchResult" style="width: 100%" height="100%" v-bind="attrs" v-on="listeners">
				<!-- 序号列，可以根据需求删除 -->
				<el-table-column v-if="hasIndex" type="index" :index="indexMethod" label="序号" width="80" />
				<slot></slot>
				<el-table-column :width="typeof operateWidth === 'number' ? operateWidth + 'px': operateWidth"
					v-show="this.$slots.operate && this.$slots.operate.length" label="操作" fixed="right">
					<template slot-scope="scope">
						<slot name="operate" :row="scope.row"></slot>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-pagination class="pagination" @size-change="handlePageSizeChange" @current-change="handlecurrentPageChange"
			layout="prev, pager, next, jumper, sizes, ->, total" :page-sizes="pageSizes" :total="searchLength"
			:page-size="pageSize" :current-page="currentPage">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		name: "",
		props: {
			searchData: {
				type: Object,
				default: {},
			},
			searchUrl: {
				type: String,
				required: true
			},
			operateWidth: {
				type: Number || String,
				default: 200
			},
			hasIndex: {
				type: Boolean,
				default: false,
			}
		},
		emits: {
			onSearch: {
				default: (data) => {}
			}
		},
		computed: {
			attrs() {
				// console.log(this.$attrs);
				var newAttrs = {};
				for (let key in this.$attrs) {
					if (!this.exportAttrs.includes(key)) {
						newAttrs[key] = this.$attrs[key];
					}
				}
				return newAttrs;
			},
			listeners() {
				// console.log(this.$listeners);
				var newListeners = {};
				for (let key in this.$listeners) {
					if (!this.exportListeners.includes(key)) {
						newListeners[key] = this.$listeners[key];
					}
				}
				return newListeners;
			},
		},
		data() {
			return {
				exportAttrs: ["value", "hasIndex", 'operateWidth'],
				exportListeners: ["input", "onSearch"],

				currentPage: 1,
				// 当前页数

				pageSize: 5,
				// 页面大小

				pageSizes: [3, 4, 5, 10, 20],
				// 页面大小数组

				searchResult: [],
				// 搜索结果, 也是表格显示数据

				searchLength: 0,
				// 满足条件的数量列表
			}
		},
		mounted() {
			this.handleSearch();
		},
		methods: {
			/* 表格相关函数 */
			/* 表格序号 */
			indexMethod(i) {
				return i + this.pageSize * (this.currentPage - 1) + 1;
			},
			handleSearch() {
				this.currentPage = 1;
				// console.log("current:", this.currentPage);
				this.handleInnerSearch();
			},
			handleInnerSearch() {
				this.InnerSearchData = {
					...this.searchData,
					limit: this.pageSize,
					offset: (this.currentPage - 1) * this.pageSize
				};
				this.$api.post(this.searchUrl, this.InnerSearchData).then((res) => {
					if (res || res.code == 1) {
						this.searchResult = res.data.list;
						this.searchLength = res.data.length;
						this.$emit("onSearch", this.searchData);
					} else {
						this.searchResult = [];
						this.searchLength = 0;
						this.$emit("onSearch", this.searchData);
					}
				})
			},
			handlePageSizeChange(size) {
				this.pageSize = size;
				this.handleInnerSearch();
			},
			handlecurrentPageChange(page) {
				this.currentPage = page;
				this.handleInnerSearch();
			},
			/* 表格相关函数END */
		}
	}
</script>

<style lang="less" scoped>
	.table_container {
		background-color: white;
		padding: 10px;
		border-radius: 8px;
		margin-top: 20px;
		width: 100%;
		height: 100%;

		.table {
			height: calc(100% - 36px);
			overflow: auto;
		}

		.pagination {
			height: 36px;
			text-align: center;
		}
	}
</style>